<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Sprite</title>
  <style>
    #container {
      width: 650px;
    }

    #stage {
      border: 1px solid gray;
    }

    .options {
      float: left;
      border: 1px solid gray;
      width: 300px;
      height: 300px;
      font-size: 12px;
    }

    .options .options_container {
      padding: 10px;
    }

    .options_container div {
      margin-bottom: 5px;
      height: 25px;
    }

    .options label {
      width: 100px;
      display: inline-block;
    }
  </style>
</head>

<body>
  <h1>Sprite</h1>
  <div id="container">
    <canvas id="stage" width="300" height="300"></canvas>
    <div class="options">
      <div class="options_container">
        <div>
          <button id="btn_start">START</button>
          <button id="btn_stop">STOP</button>
        </div>
        <div>
          <label for="fps">FPS</label>
          <input type="range" id="fps" name="fps" min="1" max="50" value="10">
        </div>
        <div>
          <label for="fps">Type</label>
          <select id="select_type">
            <option value="0">기본</option>
            <option value="1">점프</option>
            <option value="2" selected>달리기</option>
            <option value="3">공격</option>
          </select>
        </div>
      </div>
    </div>
  </div>

  <script src="../dist/stage.js"></script>
  <script>
    const stage = new stg.Stage('stage');
    const img = new Image();
    img.src = './assets/sprite.png';

    const spriteSheetList = [
      new stg.SpriteSheet(img, 144, 144, [[0, 0], [1, 0], [2, 0], [3, 0], [4, 0]], true),
      new stg.SpriteSheet(img, 144, 144, [[0, 1], [1, 1], [2, 1], [3, 1], [4, 1]], true),
      new stg.SpriteSheet(img, 144, 144, [[0, 2], [1, 2], [2, 2], [3, 2], [4, 2], [5, 2]], true),
      new stg.SpriteSheet(img, 144, 144, [[0, 3], [1, 3], [2, 3], [3, 3], [4, 3]], true)
    ];

    const sprite = new stg.Sprite(spriteSheetList[2], 10);
    sprite.x = 80;
    sprite.y = 60;


    stage.addChild(sprite);
    sprite.play();



    document.getElementById('btn_start').addEventListener('click', () => {
      sprite.reset();
      sprite.play();
    });

    document.getElementById('btn_stop').addEventListener('click', () => {
      sprite.stop();
    });

    document.getElementById('fps').addEventListener('input', event => {
      sprite.fps = parseFloat(event.target.value);
    });

    document.getElementById('select_type').addEventListener('change', event => {
      sprite.spriteSheet = spriteSheetList[parseInt(event.target.value)];
    });

  </script>
</body>

</html>